<template>
  <div id="revenue-situation">
    <ContentField>
      <template v-slot:content-field-card-name>营收状况</template>
      <template v-slot:content-field-card-button></template>
      <template v-slot:content-field-card-body>
        <div id="revenue-situation-body">
          <div class="block">
            <el-date-picker
              v-model="value2"
              type="daterange"
              unlink-panels
              range-separator="To"
              start-placeholder="Start date"
              end-placeholder="End date"
              :shortcuts="shortcuts"
              :size="size"
              @change="timeChange"
            />
          </div>
          <el-divider />
          <el-row>
            <el-col :span="6">
              <el-statistic title="总销售额：" :value="total_money" /> </el-col
          ></el-row>
        </div>
      </template>
      <template v-slot:content-field-card-footer></template>
    </ContentField>
  </div>
</template>

<script>
import ContentField from "@/components/ContentField.vue";
import { ref } from "vue";
import { useStore } from "vuex";
import dateUtil from "@/util/date";

export default {
  components: {
    ContentField,
  },
  setup() {
    let store = useStore();

    let value2 = ref("");
    let total_money = ref(0);

    const shortcuts = [
      {
        text: "Last week",
        value: () => {
          const end = new Date();
          const start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
          return [start, end];
        },
      },
      {
        text: "Last month",
        value: () => {
          const end = new Date();
          const start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
          return [start, end];
        },
      },
      {
        text: "Last 3 months",
        value: () => {
          const end = new Date();
          const start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
          return [start, end];
        },
      },
    ];
    let timeChange = () => {
      let start_time = dateUtil.formatDate(value2.value[0]);
      let end_time = dateUtil.formatDate(value2.value[1]);
      // console.log(start_time, end_time);
      store.dispatch("get_total_money", {
        token: store.state.user.jwt_token,
        start_time: start_time,
        end_time: end_time,
        success(data) {
          total_money.value = data.data;
        },
      });
    };

    return {
      shortcuts,
      store,
      timeChange,
      value2,
      total_money,
    };
  },
};
</script>

<style scoped>
.demo-date-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}

.demo-date-picker .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}

.demo-date-picker .block:last-child {
  border-right: none;
}

.demo-date-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
</style>
